<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="rolePage">
        <el-row>
          <el-col :sm="11">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="filter-item"
              @change="fetchData()"
            />
          </el-col>
          <el-col :sm="13" style="text-align: left">
            <div class="title">组件8大主材超BOM损耗明细</div>
          </el-col>
        </el-row>

      </div>
    </div>
    <el-row v-if="list.length > 0" class="table">
      <table style="width: 100%" border="0" cellspacing="0">
        <thead>
          <tr>
            <th>日期</th>
            <th>线别</th>
            <th>投入</th>
            <th>物料名称</th>
            <th>单位</th>
            <th>损耗数量</th>
            <th>金额</th>
            <th>责任部门</th>
            <th>损耗原因</th>
            <th>改善措施</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td :class="{ hidden: item.index }" :rowspan="item.rowspan">{{
              item.bomDate }}</td>
            <td :class="{ hidden: item.index }" :rowspan="item.rowspan">{{
              item.workLines }}</td>
            <td :class="{ hidden: item.index }" :rowspan="item.rowspan">{{
              item.input }}</td>
            <td>{{ item.materialNam }}</td>
            <td>{{ item.materialUnit }}</td>
            <td>{{ item.lossQuantity }}</td>
            <td :class="{ hidden: item.index }" :rowspan="item.rowspan">{{ item.money }}</td>
            <td :class="{ hidden: item.index }">{{ item.department }}</td>
            <td :class="{ hidden: item.index }">{{ item.lossWhat }}</td>
            <td :class="{ hidden: item.index }">{{ item.improveMethod }}</td>
          </tr>

        </tbody>
      </table>
    </el-row>
  </div>
</template>
<script>
import './css/index.scss'
import { bomAllItems } from '@/api/report'
export default {
  data: function() {
    return {
      activeCardName: 'all',
      list: [], // 全部数据
      dateRange: []
    }
  },
  created() {
    // 获取数据
  },
  methods: {
    async fetchData() {
      const params = {
        pageNum: 1,
        pageSize: 100,

        starTime: '',
        endTime: ''
      }
      if (this.dateRange) {
        const start = this.getTime(this.dateRange[0])
        const end = this.getTime(this.dateRange[1])
        params.starTime = start
        params.endTime = end
      }
      const data = await bomAllItems(params)
      this.list = this.formatDate(data.data.content)
    },
    formatDate(data) {
      const list = []
      if (data) {
        data.forEach(item => {
          item.materialRelateList.forEach((body, index) => {
            list.push(
              {
                'rowspan': index == 0 ? item.materialRelateList.length : 1,
                'bomDate': item.bomLoss.bomDate,
                'workLines': item.bomLoss.workLines,
                'input': item.bomLoss.input,
                'money': item.bomLoss.money,
                'index': index != 0,
                materialNam: body.materialName,
                materialUnit: body.materialUnit,
                lossQuantity: body.lossQuantity,
                department: body.department,
                lossWhat: body.lossWhat,
                lossTime: body.lossTime,
                improveMethod: body.improveMethod
              }
            )
          })
        })
      }
      return list
    },
    getTime(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return y + '-' + m + '-' + d
    }
  }
}
</script>
<style lang="scss" scoped>
.userlist {
    margin-right: 10px;
}

.title {
    height: 20px;
    padding-left: 5px;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 23px;
    display: inline-block;
}

.hidden {
    display: none;
}

table {
    border-collapse: separate;
    border-top: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
}

thead tr th {
    background-color: #f8f8f9;
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}

tbody tr td {
    padding: 6px;
    text-align: center;
    height: 34px; //设置单元格最小高度
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}
</style>
